<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <!-- 头部 -->
    <a-layout-header>
      <div class="logo">
        <img src="@/assets/img/main/logo.png" alt="logo" />
      </div>
      <div class="header-right">
        <a-menu theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
          <a-menu-item key="1" @click="handleChangePassword">
            <a-icon type="lock" />修改密码
          </a-menu-item>
          <a-menu-item key="2" @click="handleLogout">
            <a-icon type="logout" />退出登录
          </a-menu-item>
          <a-menu-item key="3">
            <a class="ant-dropdown-link" @click.prevent>
              <a-icon type="user" /> {{ userInfo.person_name || '未登录' }}
            </a>
          </a-menu-item>
        </a-menu>
      </div>
    </a-layout-header>
    <!-- 内容 -->
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>&nbsp;</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '48px 48px', minHeight: 'calc(100vh - 64px - 32px - 21px - 69px)' }">
        <a-row :gutter="128">
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(1)">
            <a-card class="card-item card-item-1" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="play-square" />&nbsp;短视频管理
                </template>
                <template slot="description">
                  Clip
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(2)">
            <a-card class="card-item card-item-2" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="bar-chart" />&nbsp;短视频排行榜
                </template>
                <template slot="description">
                  Ranking List
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(3)">
            <a-card class="card-item card-item-3" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="idcard" />&nbsp;人员去向
                </template>
                <template slot="description">
                  Destination
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(4)">
            <a-card class="card-item card-item-4" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="idcard" />&nbsp;部门人员管理
                </template>
                <template slot="description">
                  Department
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(5)">
            <a-card class="card-item card-item-5" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="code" />&nbsp;系统日志
                </template>
                <template slot="description">
                  System Log
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(6)">
            <a-card class="card-item card-item-6" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="car" />&nbsp;公车管理
                </template>
                <template slot="description">
                  Official Vehicles
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col class="gutter-row" :span="6" @click="handleRouteTo(7)">
            <a-card class="card-item card-item-7" hoverable>
              <div class="card-item-img" slot="cover" />
              <a-card-meta>
                <template slot="title">
                  <a-icon type="build" />&nbsp;报题系统
                </template>
                <template slot="description">
                  reporting system
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
    <!-- 底部 -->
    <a-layout-footer style="text-align: center">
      © 2025 缙云县融媒体中心. All rights reserved.
    </a-layout-footer>
    <!-- 修改密码 -->
    <change-password ref="changePasswordModal" />
  </a-layout>
</template>
<script>
  import ChangePassword from './components/ChangePassword.vue'

  export default {
    name: 'home-page',
    components: {
      ChangePassword
    },
    data() {
      return {
        userInfo: {}
      }
    },
    mounted() {
      // 获取用户信息
      const personInfo = window.sessionStorage.getItem('person_info')
      if (personInfo) {
        this.userInfo = JSON.parse(personInfo)
      }
    },
    methods: {
      handleChangePassword() {
        this.$refs.changePasswordModal.showModal()
      },
      handleLogout() {
        this.$confirm({
          title: '确认退出',
          content: '确定要退出登录吗？',
          onOk: () => {
            window.sessionStorage.clear()
            window.localStorage.removeItem('password')
            this.$router.push('/login')
          }
        })
      },
      handleRouteTo(type) {
        switch (type) {
          case 1:
            window.open(this.$router.resolve({
              name: 'home',
            }).href, '_blank')
            break;
          case 2:
            window.open(this.$router.resolve({
              name: 'statistic-page',
            }).href, '_blank')
            break;
          case 3:
            if (this.userInfo.role_destination == '系统管理员' || this.userInfo.role_destination == '部门负责人') {
              window.open(this.$router.resolve({
                name: 'destination-main',
              }).href, '_blank')
            } else {
              this.$message.error('您没有权限')
            }
            break;
          case 4:
            if (this.userInfo.role_main == '系统管理员') {
              window.open(this.$router.resolve({
                name: 'department-main',
              }).href, '_blank')
            } else {
              this.$message.error('您没有权限')
            }
            break;
          case 5:
            if (this.userInfo.role_main == '系统管理员') {
              window.open(this.$router.resolve({
                name: 'sys-log',
              }).href, '_blank')
            } else {
              this.$message.error('您没有权限')
            }
            break;
          case 6:
            window.open(this.$router.resolve({
              name: 'ov-main',
            }).href, '_blank')
            break;
          case 7:
            window.open(this.$router.resolve({
              name: 'ap-main',
            }).href, '_blank')
            break;
          default:
            break;
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  #components-layout-demo-top .logo {
    height: 31px;
    /* background: rgba(255, 255, 255, 0.2); */
    margin: 16px 24px 16px 0;
    float: left;
  }

  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001529;
  }

  .logo img {
    height: 32px;
  }

  .header-right {
    float: right;
    margin-right: 24px;
  }

  .gutter-row {
    margin-bottom: 60px;
  }

  .gutter-row .card-item {
    .card-item-img {
      height: 164px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  .gutter-row .card-item-1 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-1.png');
    }
  }

  .gutter-row .card-item-2 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-2.png');
    }
  }

  .gutter-row .card-item-3 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-3.png');
    }
  }

  .gutter-row .card-item-4 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-4.png');
    }
  }

  .gutter-row .card-item-5 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-5.png');
    }
  }

  .gutter-row .card-item-6 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-6.png');
    }
  }

  .gutter-row .card-item-7 {
    .card-item-img {
      background-image: url('../../assets/img/homepage/card-item-7.png');
    }
  }
</style>